<template>
	<view class="page-deliveryAdd">
		<view class="box">
			<view class="tit">
				收货人
			</view>
			<uni-easyinput v-model="name" placeholder="" @input="input" />
		</view>
		<view class="box">
			<view class="tit">
				联系电话
			</view>
			<uni-easyinput v-model="phone" placeholder="" @input="input" />
		</view>
		<view class="box">
			<view class="tit">
				所在省市区(县)
			</view>
			<!-- <uni-easyinput v-model="address" placeholder="" @input="input" /> -->
			<!-- <button @tap="open">打开</button> -->
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="confirm" @cancel="cancel" :visible="visible" />
			<uni-easyinput v-model="address" placeholder="请选择省市区" readonly @focus="open" />
			<!-- <button @tap="open">打开</button>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="confirm" @cancel="cancel" :visible="visible" />
			<view>{{str}}</view> -->
		</view>
		<view class="box">
			<view class="tit">
				详细地址
			</view>
			<uni-easyinput class="input-container" v-model="remarks" placeholder="" @input="input" />
		</view>
		<view class="box">
			<view class="tit">
				是否默认
			</view>
			<checkbox :checked="isDefaultChecked" @click="toggleDefaultCheckbox($event.detail.value)"
				class="store-selector" color="#ffffff" activeBackgroundColor="#FFCC33" activeBorderColor="#ffffff">
			</checkbox>
		</view>
		<button type="primary" class="button" @click="updateAddress()">确定</button>
	</view>
</template>
<script>
	import axios from 'axios';
	import service from '../../utils/request.js';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		data() {
			return {
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				name: '',
				phone: '',
				address: '',
				remarks: '',
				userID: localStorage.getItem("userID"),
				isDefaultChecked: false
			}
		},
		components: {
			cityPicker
		},
		onLoad() {

			this.addressID = uni.getStorageSync('addressID');
			this.getAddressData(this.addressID);

		},
		methods: {
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.address = `${val.provinceName} ${val.cityName} ${val.areaName}`;
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			toggleDefaultCheckbox(checked) {
				this.isDefaultChecked = !this.isDefaultChecked;

			},
			input(e) {
				uni.showToast({
					title: e
				})
			},
			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			},
			async getAddressData(addressID) {
				try {
					const response = await service.get('/address/listSingle/' + this.userID + '/' + this.addressID);
					const address = response.data;
					this.name = address[0].name;
					this.phone = address[0].phone;
					this.address = address[0].address;
					this.remarks = address[0].remarks;
					this.isDefaultChecked = address[0].isDefault
				} catch (error) {
					console.error('获取数据失败:', error);
				}
			},
			async updateAddress() {
				try {
					this.userID = localStorage.getItem("userID");
					const response = await service.put('/address/update', { // 你的后端地址
						name: this.name,
						phone: this.phone,
						address: this.address,
						remarks: this.remarks,
						userID: this.userID,
						isDefault: this.isDefaultChecked,
						addressID: this.addressID
					});
					console.log('获取的数sdasd据:', this.isDefaultChecked);
					uni.showToast({
						title: '地址保存成功',
						icon: 'success'
					});
					uni.navigateTo({
						url: '/pages/deliveryAddList/deliveryAddList'
					})
				} catch (error) {
					console.error('插入失败:', error);
					uni.showToast({
						title: '地址保存失败',
						icon: 'none'
					});
				}
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: 'data-cityPicker省市区地址选择器！',
					path: '/pages/cityPicker/cityPicker'
				}
			},
			onShareTimeline(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: 'data-cityPicker省市区地址选择器！'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@use "deliveryUpdate";
</style>